<template>
    <div id="pop">
        <!-- 上半部分 -->
        <div class="top">
            <div class="top_div">总数
              <span class="top_span">{{statistics.sum}}</span>
            </div>
        </div>
        <!-- 中间 -->
        <div class="content">
            <div class="content_zx">
               <span>在线：{{statistics.online}}</span>
            </div>
            <div class="content_lx">
                <span>离线：{{statistics.offline}}</span>
            </div>
            <!-- <div class="content_gz">
                <span>故障：2</span>
            </div> -->
            <div class="content_yj">
                <span>未知：{{statistics.unknow}}</span>
            </div>
        </div>
        <!-- 下半部分按钮 -->
        <div class="Buttom">
            <el-row>
              <div>
                <el-button type="primary" plain @click.stop="clickVideo('circle')">覆盖范围</el-button>
              </div>
              <div class="buttom_x">
                <el-button type="primary" plain @click.stop="clickVideo('camera')">显示位置</el-button>
              </div>
            </el-row>
        </div>

        <!-- <div class="Buttom">
            <div class="buttom_t">
                <span class="buttom_span">覆盖范围</span>
            </div>
            <div class="buttom_b">
                <span class="buttom_span">显示位置</span>
            </div>
        </div>    -->
    </div>
</template>
<script>
export default {
  props: {
    statistics: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    clickVideo (flag) {
      this.$emit('clickVideo', flag)
    }
  }
}
</script>
<style scoped>
#pop{
    /* height: 465px; */
    width: 230px;
    background-color: #002a52;
    border: 1px solid #005bb5;
    border-radius: 3px;
}
.top{
    height: 75px;
    width: 100%;text-align: center;
    align-items: center;
    background-color: #083f88;
}
.top_div{
    line-height: 75px;
    color: #ccc;
    font-size: 35px;
}
.top_span{
    color: #fff;
}
/* 中间内容 */
.content{
    /* height: 228px; */
    /* margin-bottom: 20px;
    margin-top: 24px;
    margin-left: 40px; */
    text-align: center;
    font-size: 30px;
}
.content_zx{
    color: #2fc25b;
    margin-top: 25px;
}
.content_lx{
    color: #cccccc;
    margin-top: 25px;
}.content_gz{
    color: #facc14;
    margin-top: 25px;
}.content_yj{
    color: #e64663;
    margin-top: 25px;
}
/* 下半部分 */
 .Buttom{
    /* width: 154px;
    height: 127px; */
    /* margin-bottom: 15px;
    margin-left: 40px; */
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.buttom_x{
    margin-top: 10px;
}

/*.buttom_t{
    height: 60px;
}
.buttom_span{
    font-size: 25px;
    color: #edf4fe;
    background-color: #02488e;
} */
</style>
